<template>
	<view class="pinggu">
		<headertop title="评估" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<image :src="_static('/images/Group 11729@2x.png')" class="biyanguanliback" mode="widthFix">
		</image>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="bottomcontent">
			<!-- :style="{'height':flag?'800rpx':'600rpx'}" -->
			<scroll-view scroll-y @scroll="handleScroll" :scroll-top="scrollTop" scroll-with-animation class="centerr">
				<template v-for="(item,index) in liaotianarr" :key="index">
					<view class="userlt" v-if="item.shenfen=='user'">
						<image :src="_static('/images/LOGO2@2x.png')" class="avatar" mode="widthFix">
						</image>
						<view class="bubble-container">
							<!-- <view v-html=""> -->
							<uaMarkdown :source="item['text']"></uaMarkdown>
							<!-- </view> -->
							<view class="triangle1"></view>
						</view>
					</view>
					<view class="userltright" v-if="item.shenfen!='user'">
						<view class="bubble-container">
							<view>{{item['text']}}</view>
							<view class="triangle1"></view>
						</view>
						<image :src="avatar" class="avatar" mode="">
						</image>
					</view>
					<up-loading-icon text="生成中" textSize="18"
						v-if="liaotianarr.length*1==index+1&&loadingbool"></up-loading-icon>
				</template>
				<view id="bottom-anchor" style="height:160rpx"></view> <!-- 用于滚动到底部的锚点 -->
			</scroll-view>
			<view class="cainixw" v-if="flag&&questionListarr.length">
				<view class="cc">
					<view class="topbox">
						<view class="tt">
							猜您想问
						</view>
						<view class="closebox" @click="flag=false">
							<image :src="_static('/images/Frame@2x(37).png')" mode=""></image>
							<span>关闭</span>
						</view>
					</view>
					<view class="wentixinxi" v-for="item in questionListarr" :key="item.id"
						@click="clickhd(item['question'])">
						<span style="margin-left: 24rpx;">{{item['question']}}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 		<view class="" style="height: 186rpx;">

		</view> -->
		<!-- 底部消息发送栏 -->
		<!-- 用来占位，防止聊天消息被发送框遮挡 -->
		<view class="chat-bottom">
			<view class="send-msg" :style="{bottom:`${keyboardHeight - 60}rpx`}">
				<view class="uni-textarea">
					<view class="uni-textarea1">
						<textarea v-model="question" maxlength="300" confirm-type="send" @confirm="send"
							@linechange="sendHeight" placeholder-class="textarea-placeholder" placeholder="请输入内容"
							:show-confirm-bar="false"  :adjust-position="false"></textarea>
						<view class="fasong" @click="send">
							发送
						</view>
					</view>

				</view>


			</view>
		</view>


		<!-- 	<view class="fixed">
			<view class="shuruneirong">
				<input type="text" v-model="question" placeholder="请输入内容" />
				<view class="fasong" @click="send">
					发送
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import uaMarkdown from '@/components/ua2-markdown/ua-markdown.vue'
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted,
		nextTick,
		computed
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const keyboardHeight = ref('')
	const back1 = ref('')
	const avatar = ref('')
	const isFetching = ref(false)
	const question = ref('')
	const bottomHeight = ref('')
	const scrollTop = ref(0)
	const lastScrollTop = ref(0)
	const liaotianarr = ref([{
		text: '我是AI小敏，可以为您提供专业的解读，您也可以通过快捷问题和我交流。',
		shenfen: 'user'
	}])

	const questionListarr = ref([])
	const loadingbool = ref(false)
	const flag = ref(true)
	onLoad(() => {
		init()
		uni.onKeyboardHeightChange(res => {
			//这里正常来讲代码直接写
			//this.keyboardHeight=this.rpxTopx(res.height)就行了
			//但是之前界面ui设计聊天框的高度有点高,为了不让键盘和聊天输入框之间距离差太大所以我改动了一下。
			keyboardHeight.value = rpxTopx(res.height)
			if (keyboardHeight.value < 0) keyboardHeight.value = 0;
		})
	})
	const inputHeight = computed(() => {
		return bottomHeight.value + keyboardHeight.value
	})

	function rpxTopx(px) {
		let deviceWidth = uni.getSystemInfoSync().windowWidth
		let rpx = (750 / deviceWidth) * Number(px)
		return Math.floor(rpx)
	}
	onShow(() => {
		if (getToken()) {
			getuser()
		}
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	// 监视聊天发送栏高度
	function sendHeight() {
		setTimeout(() => {
			let query = uni.createSelectorQuery();
			query.select('.send-msg').boundingClientRect()
			query.exec(res => {
				bottomHeight.value = rpxTopx(res[0].height)
			})
		}, 10)
	}


	async function send(str) {
		if (!question.value) {
			uni.showToast({
				title: '请输入内容',
				icon: 'none'
			})
			return
		}
		loadingbool.value = true
		liaotianarr.value.push({
			text: question.value,
			shenfen: 'user1'
		})
		scrollTop.value = 99999
		isFetching.value = true;
		const res = await $api.aiChat({
			question: question.value
		})

		question.value = ''
		if (res.code == 1) {
			loadingbool.value = false
			liaotianarr.value.push({
				text: res.data,
				shenfen: 'user'
			})
			question.value = ''
		} else {
			loadingbool.value = false
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			question.value = ''
		}
	}
	async function clickhd(str) {
		loadingbool.value = true
		liaotianarr.value.push({
			text: str,
			shenfen: 'user1'
		})
		flag.value = false
		scrollTop.value = 99999
		const res = await $api.aiChat({
			question: str
		})
		question.value = ''
		if (res.code == 1) {
			loadingbool.value = false
			liaotianarr.value.push({
				text: res.data,
				shenfen: 'user'
			})
		} else {
			loadingbool.value = false
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function getuser() {
		const res = await $api.userinfo1()
		if (res.code == 1) {
			avatar.value = res.data['userinfo']['avatar']
		}
	}
	async function init() {
		const res = await $api.questionList()
		if (res.code == 1) {
			questionListarr.value = res.data
		}
	}



	// 监听滚动事件（可选）
	const handleScroll = (e) => {
		if (scrollTop.value == 99999) {
			scrollTop.value = e.detail.scrollTop;
		}
	};
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
</script>

<style lang="scss">
	/* 底部聊天发送栏 */
	.chat-bottom {
		width: 100%;
		transition: all 0.1s ease;


		.send-msg {
			display: flex;
			align-items: flex-end;
			padding: 16rpx 30rpx;
			width: 100%;
			background: #fff;
			transition: all 0.1s ease;
			position: fixed;
			bottom: 0;
		}

		.uni-textarea {
			padding-bottom: 70rpx;

			.uni-textarea1 {
				display: flex;
				align-items: center;
				background: #f7f8fa;
				border-radius: 12rpx;

				.textarea-placeholder {
					line-height: 80rpx;
				}

				textarea {
					width: 537rpx;
					height: 80rpx;
					background: #F7F8FA;
					border-radius: 40rpx;
					font-size: 32rpx;
					line-height: 80rpx !important;
					font-family: PingFang SC;
					color: #86909C;
					padding: 5rpx 8rpx;
					text-indent: 30rpx;
				}

				.fasong {
					width: 128rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					text-align: center;
					font-size: 32rpx;
					color: #2AB4F5;
					border-left: 2rpx solid #C9CDD4;
				}
			}

		}


	}






	page {
		background: #F7F8FA;
	}

	.pinggu {
		width: 100%;
		overflow: hidden;
		position: relative;

		.biyanguanliback {
			width: 100%;
			height: 626rpx;
			position: absolute;
			z-index: -1;
		}

		.fixed {
			width: 100%;
			height: 156rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: fixed;
			bottom: 0%;

			.shuruneirong {
				width: 686rpx;
				margin: auto;
				height: 80rpx;
				background: #F7F8FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 22rpx;

				textarea {
					box-sizing: border-box;
					height: 50rpx;
					margin-left: 28rpx;
				}

				input {
					width: 500rpx;
					margin-left: 28rpx;
				}

				.fasong {
					width: 128rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					text-align: center;
					font-size: 32rpx;
					color: #2AB4F5;
					border-left: 2rpx solid #C9CDD4;
				}
			}
		}

		.bottomcontent {
			width: 100%;
			background: #F7F8FA;
			// box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(143, 217, 254, 0.68);
			border-radius: 48rpx 48rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: 260rpx;
			// height: 100vh;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;

			.cainixw {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(124, 124, 124, 0.29);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				overflow: hidden;
				position: absolute;
				bottom: 250rpx;
				margin: auto;
				position: fixed;

				.cc {
					width: 630rpx;
					margin: auto;
					overflow: hidden;

					.topbox {
						width: 630rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 32rpx;
						margin-bottom: 22rpx;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;
						}

						.closebox {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #2AB4F5;

							image {
								width: 36rpx;
								height: 36rpx;
								margin-right: 8rpx;
							}
						}
					}

					.wentixinxi {
						width: 630rpx;
						height: 76rpx;
						background: #EEF9FF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						line-height: 76rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-bottom: 20rpx;
					}
				}
			}

			.centerr {
				width: 686rpx;
				margin: auto;
				margin-top: 50rpx;
				position: relative;
				height: 1000rpx;

				.userltright {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;
					justify-content: flex-end;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-left: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #2AB4F5;
						/* 气泡框背景颜色 */
						color: #FFFFFF;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-left: 10px solid #2AB4F5;
							/* 底边为气泡框背景色 */
							right: -10px;
							/* 位于气泡框顶部 */
							top: 20rpx;
							/* 居中 */
							/* 居中 */
							/* 水平居中 */
						}

					}
				}

				.userlt {
					width: 100%;
					display: flex;
					margin-bottom: 50rpx;

					.avatar {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
						margin-right: 32rpx;
					}


					.bubble-container {
						position: relative;
						max-width: 530rpx;
						;
						/* 气泡框最大宽度 */
						background: #FFFFFF;
						/* 气泡框背景颜色 */
						color: #4E5969;
						/* 文字颜色 */
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						/* 圆角边框 */
						padding: 22rpx;
						font-size: 28rpx;
						/* 内边距 */
						/* 外边距，可根据需要调整 */

						.triangle1 {
							position: absolute;
							width: 0;
							height: 0;
							border-top: 10px solid transparent;
							/* 左边透明 */
							border-bottom: 10px solid transparent;
							/* 右边透明 */
							border-right: 10px solid #FFFFFF;
							/* 底边为气泡框背景色 */
							left: -10px;
							/* 位于气泡框顶部 */
							top: 20rpx;
							/* 居中 */
							/* 水平居中 */
						}

					}


				}
			}
		}
	}
</style>